<html>
<head>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
		
		
<script type="text/javascript">

$(function(){

	$('#datepicker').datepicker({
		inline: false, 
		dateFormat: 'dd-M-yy'
	});
				
});


$(document).ready(function() {

	$('#godate').click(function() {

		var lebar = gup("lebar");
		var urlLebar="";
		if(lebar!="")
		{
			urlLebar = "&lebar="+lebar;
		}
		//alert($('#datepicker').val());
		document.location.href = "baca.html?tanggal="+$('#datepicker').val()+urlLebar;
		
	});

});



</script>
<script type="text/javascript">
function gup( name ) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
	var regexS = "[\\?&]"+name+"=([^&#]*)";  
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	
	if( results == null )   
		return "";  
	else  
		return results[1];
}

function init()
{
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	var lebar = gup("lebar");
	
	var currentTime = new Date();

	if(tanggal=="")
		tanggal = pad(currentTime.getDate(),2)+"-"+month(currentTime.getMonth())+"-"+currentTime.getFullYear();
	
	if(halaman=="")
		halaman="1";
	
	var urlLebar="";
	if(lebar=="")
	{
		//nothing
	}
	else
	{
		var gambarJPG = document.getElementById("gambarJPG");
		var gambarPNG = document.getElementById("gambarPNG");
		
		gambarJPG.width = lebar;
		gambarPNG.width = lebar;
		
		urlLebar = "&lebar="+lebar;
	}
	
	document.getElementById("tanggal").value = tanggal;
	document.getElementById("halaman").value = halaman;
	document.getElementById("datepicker").value = tanggal;
	
	var nav = document.getElementById("navigation");
	nav.innerHTML="";
	var i;
	for(i=1;i<=64;i++)
	{
		if(halaman==i)
			nav.innerHTML+=" [ ";
		nav.innerHTML+='<a href="baca.html?tanggal='+tanggal+'&halaman='+i + urlLebar+ '">'+i+'</a> ';
		
		if(halaman==i)
			nav.innerHTML+="] ";
		
	}
	
	
	
	setPicture();
}


function pad(number, length) {
	var str = '' + number;
	while (str.length < length) {
		str = '0' + str;
	}

	return str;
}

function month(m)
{
	if(m==0)
		return "Jan";
	else if(m==1)
		return "Feb";
	else if(m==2)
		return "Mar";
	else if(m==3)
		return "Apr";
	else if(m==4)
		return "May";
	else if(m==5)
		return "Jun";
	else if(m==6)
		return "Jul";
	else if(m==7)
		return "Aug";
	else if(m==8)
		return "Sep";
	else if(m==9)
		return "Oct";
	else if(m==10)
		return "Nov";
	else if(m==11)
		return "Dec";

}


function setPicture()
{
	var tanggal = document.getElementById("tanggal").value;
	var halaman = document.getElementById("halaman").value;
	
	//alert(tanggal);
	//alert(halaman);
	
	var picJPG = 'http://images.cdn.realviewdigital.com/djvu/Kompas/Kompas/'+tanggal+'/webimages/page'+pad(halaman,7)+'_large.jpg';
	var picPNG = 'http://images.cdn.realviewdigital.com/djvu/Kompas/Kompas/'+tanggal+'/webimages/page'+pad(halaman,7)+'_large.png';
	
	var gambarJPG = document.getElementById("gambarJPG");
	var gambarPNG = document.getElementById("gambarPNG");
	
	gambarJPG.src = picJPG;
	gambarPNG.src = picPNG;
	
	
	var don = document.getElementById("download");
	don.innerHTML="";
	don.innerHTML+='<a href="'+picJPG+'">jpg</a> ';
	don.innerHTML+='<a href="'+picPNG+'">png</a> ';
	
	
	//alert(picJPG);
	//alert(picPNG);
}


function resetZoom()
{
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	
	var url = 'baca.html?tanggal='+tanggal+'&halaman='+halaman
	
	document.location.href = url;
}

function zoomIn()
{
	var gambarJPG = document.getElementById("gambarJPG");
	var gambarPNG = document.getElementById("gambarPNG");
	
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	var lebar = gup("lebar");
	
	if(lebar=="")
	{
		lebar = gambarJPG.width;
	}
	else
	{
		lebar = parseInt(lebar);
	}
	
	var url = 'baca.html?tanggal='+tanggal+'&halaman='+halaman+'&lebar='+(lebar+50);
	
	document.location.href = url;
}

function zoomOut()
{
	var gambarJPG = document.getElementById("gambarJPG");
	var gambarPNG = document.getElementById("gambarPNG");
	
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	var lebar = gup("lebar");
	
	if(lebar=="")
	{
		lebar = gambarJPG.width;
	}
	else
	{
		lebar = parseInt(lebar);
	}
	
	var url = 'baca.html?tanggal='+tanggal+'&halaman='+halaman+'&lebar='+(lebar-50);
	
	document.location.href = url;
	
}

function nextPage()
{
	var gambarJPG = document.getElementById("gambarJPG");
	var gambarPNG = document.getElementById("gambarPNG");
	
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	var lebar = gup("lebar");
	
	if(lebar=="")
	{
		lebar = gambarJPG.width;
	}
	else
	{
		lebar = parseInt(lebar);
	}
	
	var url = 'baca.html?tanggal='+tanggal+'&halaman='+(halaman+1)+'&lebar='+lebar;
	
	document.location.href = url;
}

function prevPage()
{
	var gambarJPG = document.getElementById("gambarJPG");
	var gambarPNG = document.getElementById("gambarPNG");
	
	var tanggal = gup("tanggal");
	var halaman = gup("halaman");
	var lebar = gup("lebar");
	
	if(lebar=="")
	{
		lebar = gambarJPG.width;
	}
	else
	{
		lebar = parseInt(lebar);
	}
	
	var url = 'baca.html?tanggal='+tanggal+'&halaman='+(halaman-1)+'&lebar='+lebar;
	
	document.location.href = url;
}

//~ function nextPage()
//~ {
	//~ var halaman = document.getElementById("halaman").value;
	//~ halaman = parseInt(halaman) + 1;
	//~ document.getElementById("halaman").value = halaman;
	
	//~ setPicture();
//~ }

//~ function prevPage()
//~ {
	//~ var halaman = document.getElementById("halaman").value;
	//~ halaman = parseInt(halaman) - 1 ;
	//~ document.getElementById("halaman").value = halaman;
	
	//~ setPicture();

//~ }


</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1026881-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();


</script>

</head>

<body onload="init()">

<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6436484; 
var sc_invisible=1; 
var sc_security="08b4fb6b"; 
</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="tumblr site counter"
href="http://statcounter.com/tumblr/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6436484/0/08b4fb6b/1/"
alt="tumblr site counter" ></a></div></noscript>
<!-- End of StatCounter Code -->


<div>
	<input type="hidden" id="tanggal" value="13-Sep-2010" />
	<input type="hidden" id="halaman" value="1" />

	
	
	<div>
		<!--
		<input type="button" value="prev" onClick="prevPage()" />
		<input type="button" value="next" onClick="nextPage()" />
		-->
		
		<input id="datepicker" type="text">
		<input id="godate" type="button" value="go"></input>

		<input type="button" onclick="zoomOut()" value="-" />
		<input type="button" onclick="resetZoom()" value="0" />
		<input type="button" onclick="zoomIn()" value="+" />
		<span><a target='_blank' href="http://arfan86.blogspot.com/2010/11/launching-kompas-reader-racikan-sendiri.html">about</a> </span>
	
		<span id="download" ></span>
		<span id="navigation" ></span>
	</div>
	<div style="position:absolute;width:100%;padding:0px">
		<img src="" width="100%" style="padding:0px" id="gambarJPG" alt="arfan keren abis"/>
	</div>
	<div style="position:absolute;width:100%;padding:0px">
		<img src="" width="100%" style="padding:0px" id="gambarPNG" alt="arfan keren abis"/>

	</div>
</div>

</body>
</html>
